<template>
	<view :style="headerStyle">
		<view class="bg">
			<view class="sprite sp01"></view>
			<view class="sprite sp02"></view>
			<view class="sprite sp03"></view>
		</view>
		<view class="header">
			<view class="box">
				<view class="more">{{ weather.city }}</view>
				<span style="margin-left: 20rpx;color: blue;" @click="inputDialogToggle">切换</span>
			</view>
			<view class="mode" @click="modeFunc"><view class="tip" :style="tipBtn"></view></view>
		</view>
		<view class="content">
			<view class="sun"></view>
			<view class="time">
				<h3>{{ weather.info.wea_day }}</h3>
				<h4 style="font-weight: 400;margin-top: 10rpx;font-size: 30rpx;" v-if="weather.info.date">
					{{ weather.info.week }} , {{ weather.info.date.split('-')[1] }}/{{ weather.info.date.split('-')[2] }}
				</h4>
			</view>
			<view class="temp">27°</view>
		</view>
		<view class="air">
			<view class="title">空气质量</view>
			<view class="details">
				<view class="item" v-for="(item, index) in Object.keys(weather.wind)" :key="index">
					<span>{{ item }}</span>
					{{ weather.wind[item] }}
				</view>
			</view>
		</view>
		<view class="days" v-if="weather.wind">
			<view :class="index == 0 ? 'active' : 'item'" v-for="(item, index) in weather.info.hours" :key="index">
				<span style="white-space: nowrap;">{{ item.hours }}</span>
				<span class="date">{{ item.win }}</span>
				<image src="../../static/icon/1.png" mode="widthFix"></image>
				<span style="font-weight: 600;">{{ item.tem }}°C</span>
				<span class="wind">{{ item.aqinum }}</span>
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="输入城市" value="" placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
import { reactive, ref, toRefs, onMounted, computed, onBeforeMount } from 'vue';
import { appid, appsecret } from '../../utils/base.js';
const weather = reactive({
	info: {},
	wind: {},
	city: '获取中'
});
let tipBtn = ref('left:0rpx;');
let barHightTop = ref('100rpx');
let headerStyle = computed(() => {
	return 'height: 100%;overflow: hidden;padding-top:' + barHightTop.value + ';';
});
let inputDialog = ref();
let inputDialogToggle = () => {
	inputDialog.value.open();
};
let dialogInputConfirm = value => {
	inputDialog.value.close();
	searchFunc(value);
};
const searchFunc = bool => {
	if (bool == 0) {
		let city = weather.city.search('市') != -1 ? weather.city.substr(0, weather.city.length - 1) : weather.city;
		getInfo(city);
	} else {
		let city = bool.search('市') != -1 ? bool.substr(0, bool.length - 1) : bool;
		getInfo(bool);
	}
};
let getInfo = city => {
	uni.request({
		url: `https://v0.yiketianqi.com/api?unescape=1&version=v62&appid=${appid}&appsecret=${appsecret}&city=${city}`
	}).then(res => {
		console.log(res);
		if (res.data.errcode == 100) {
			return uni.showToast({
				icon: 'error',
				title: res.data.errmsg
			});
		}
		weather.city = city;
		const data = res.data;
		weather.info = data;
		weather.wind = {
			风速: data.win_meter,
			二氧化氮: data.aqi.no2,
			pm25: data.aqi.pm25,
			臭氧: data.aqi.o3,
			湿度: data.humidity,
			pm10: data.aqi.pm10
		};
	});
};
onMounted(() => {
	let systemInfo = uni.getSystemInfoSync();
	var statusBarHeight = systemInfo.statusBarHeight;
	barHightTop.value = statusBarHeight + 'px';
	uni.getLocation({
		type: 'gcj02',
		geocode: true, //设置该参数为true可直接获取经纬度及城市信息
		success: function(res) {
			weather.city = res.address.city;
			searchFunc(0);
		},
		fail: function() {
			uni.showToast({
				title: '获取地址失败，将导致部分功能不可用',
				icon: 'none'
			});
		}
	});
});
const modeFunc = () => {
	if (tipBtn.value == 'left:0rpx;') {
		tipBtn.value = 'left:100rpx;';
	} else {
		tipBtn.value = 'left:0rpx;';
	}
};
</script>
<style>
page {
	height: 100%;
	overflow: hidden;
}
</style>
<style lang="less">
.bg {
	height: 100%;
	position: absolute;
	background-color: white;
	filter: blur(130rpx);
	z-index: -1;
	.sprite {
		position: absolute;
		width: 700rpx;
		height: 700rpx;
		border-radius: 50%;
	}
	.sp01 {
		top: -80rpx;
		left: -100rpx;
		background-color: #e7fefa;
	}
	.sp02 {
		top: calc(50% - 350rpx);
		right: -100rpx;
		background-color: #feffdb;
		z-index: 1;
	}
	.sp03 {
		bottom: 30rpx;
		background-color: #ddf9ff;
	}
}
.header {
	margin: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.box {
		display: flex;
		align-items: center;
	}
	.more {
		height: 100rpx;
		padding: 0 20rpx;
		border-radius: 30rpx;
		background: linear-gradient(145deg, #ffffff, #e6e6e6);
		box-shadow: 5px 5px 10px #b2d7de, -5px -5px 10px #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #9ba7c4;
	}
	.mode {
		position: relative;
		height: 80rpx;
		width: 200rpx;
		border-radius: 40rpx;
		background-color: rgba(115, 230, 255, 0.5);
		display: flex;
		align-items: center;
		.tip {
			position: absolute;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background: linear-gradient(145deg, #ffffff, #e6e6e6);
			box-shadow: 5px 5px 10px #b2d7de;
			transition: all 0.05s;
		}
	}
}
.content {
	position: relative;
	width: 90%;
	height: 380rpx;
	background-color: #0093e9;
	background-image: linear-gradient(315deg, #0093e9 0%, #80d0c7 100%);
	margin: 50rpx auto;
	border-radius: 30rpx;
	box-shadow: 5px 5px 10px #b2d7de, -5px -5px 10px #ffffff;
	display: flex;
	.sun {
		position: absolute;
		left: 50rpx;
		top: -50rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background-color: #e9b500;
		background-image: linear-gradient(28deg, #e9b500 0%, #ebff00 100%);
		box-shadow: 0 -8rpx 12rpx 12rpx rgba(235, 255, 0, 0.5);
	}
	.time,
	.temp {
		flex: 1;
	}
	.time {
		color: white;
		padding-top: 220rpx;
		padding-left: 60rpx;
		h3,
		h4 {
			font-size: 36rpx;
		}
	}
	.temp {
		color: white;
		padding-top: 70rpx;
		font-size: 150rpx;
		font-weight: 600;
	}
}
.air {
	position: relative;
	width: 90%;
	height: 380rpx;
	background-color: white;
	margin: 50rpx auto;
	border-radius: 30rpx;
	box-shadow: 5px 5px 10px #d3e3e5, -5px -5px 10px #ffffff;
	.title {
		font-size: 40rpx;
		text-align: center;
		padding-top: 20rpx;
		font-weight: 600;
	}
	.details {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
		.item {
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 222rpx;
			span {
				color: #9ba7c4;
				padding-bottom: 14rpx;
			}
		}
	}
}
.days {
	flex-wrap: nowrap;
	overflow: scroll;
	position: relative;
	width: 90%;
	margin: 30rpx auto;
	display: flex;
	.item {
		margin-left: 30rpx;
		padding: 20rpx 15rpx;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		image {
			width: 60rpx;
			margin: 12rpx 0;
		}
		.date {
			white-space: nowrap;
			font-size: 28rpx;
			color: rgb(160, 167, 186);
		}
		.wind {
			color: white;
			background-color: rgb(255, 212, 57);
			margin-top: 10rpx;
			font-size: 26rpx;
			padding: 4rpx;
			border-radius: 10rpx;
		}
	}
	.active {
		margin-left: 30rpx;
		color: white;
		padding: 20rpx 15rpx;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #e9b500;
		background-image: linear-gradient(0deg, #0093e9 0%, #96f4e9 100%);
		image {
			width: 60rpx;
			margin: 12rpx 0;
		}
		.date {
			white-space: nowrap;
			font-size: 28rpx;
			color: rgb(237, 239, 247);
		}
		.wind {
			color: white;
			background-color: rgb(255, 212, 57);
			margin-top: 10rpx;
			font-size: 26rpx;
			padding: 4rpx;
			border-radius: 10rpx;
		}
	}
}
</style>
